vue

2023-06-30 04:27| 来源: 网络整理| 查看: 265

src下找到permission.js文件

import router from './router' import store from './store' import { Message } from 'element-ui' import NProgress from 'nprogress' // progress bar import 'nprogress/nprogress.css' // progress bar style import { getToken } from '@/utils/auth' // get token from cookie import getPageTitle from '@/utils/get-page-title' NProgress.configure({ showSpinner: false }) // NProgress Configuration const whiteList = ['/login'] // no redirect whitelist router.beforeEach(async(to, from, next) => { // start progress bar NProgress.start() // set page title document.title = getPageTitle(to.meta.title) // determine whether the user has logged in const hasToken = getToken() if (hasToken) { if (to.path === '/login') { // if is logged in, redirect to the home page next({ path: '/' }) NProgress.done() } else { const hasGetUserInfo = store.getters.name if (hasGetUserInfo) { next() } else { try { // get user info const data = await store.dispatch('user/getInfo') // 获取菜单信息 const menus = await store.dispatch('user/getUserMenus') const accessRoutes = await store.dispatch('permission/generateDynamicRoutes', menus) // 更新加载路由 router.options.routes = store.getters.permission_routes router.addRoutes(accessRoutes) // next({ // ...to, // replace: true // }) next() } catch (error) { // 删除token并转到登录页面重新登录 await store.dispatch('user/resetToken') Message.error(error || 'Has Error') next(`/login?redirect=${to.path}`) NProgress.done() } } } } else { /* has no token*/ if (whiteList.indexOf(to.path) !== -1) { // in the free login whitelist, go directly next() } else { // other pages that do not have permission to access are redirected to the login page. next(`/login?redirect=${to.path}`) NProgress.done() } } }) router.afterEach(() => { // finish progress bar NProgress.done() })

在store下 modules 下 user.js中，实现 getUserMenus 方法

import { login1, logout, getInfo } from '@/api/user' import { getToken, setToken, removeToken } from '@/utils/auth' import { resetRouter } from '@/router' import { getUserMenus } from '@/api/menus' import { Message } from 'element-ui'; const getDefaultState = () => { return { token: getToken(), name: '', avatar: '', roles: [], menus: [] // 新增的 } } const state = getDefaultState() const mutations = { RESET_STATE: (state) => { Object.assign(state, getDefaultState()) }, SET_TOKEN: (state, token) => { state.token = token }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, SET_ROLES: (state, roles) => { state.roles = roles }, SET_MENUS: (state, menus) => { // 新增的 state.menus = menus } } const actions = { // user login login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { login1( {username,password}).then(response => { if (response.code === 200) { const { data } = response commit('SET_TOKEN', data.token) setToken(data.token) // 解决 Promise 对象。 resolve() } }).catch(error => { reject(error) }) }) }, // 获取用户信息 getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.token).then(response => { const data = response.data const { name, avatar } = data commit('SET_NAME', name) commit('SET_AVATAR', avatar) resolve(data) }).catch(error => { reject(error) }) }) }, // user logout logout({ commit, state }) { return new Promise((resolve, reject) => { // logout(state.token).then(() => { // removeToken() // must remove token first // resetRouter() // commit('RESET_STATE') // resolve() // }).catch(error => { // reject(error) // }) removeToken() // must remove token first resetRouter() commit('RESET_STATE') resolve() }) }, // remove token resetToken({ commit }) { return new Promise(resolve => { removeToken() // must remove token first commit('RESET_STATE') resolve() }) }, getUserMenus({ commit, state }) { return new Promise((resolve, reject) => { getUserMenus().then(response => { const { data } = response if (!data) { reject('Verification failed, please Login again.') } const menus = data // roles must be a non-empty array if (!menus || menus.length { reject(error) }) }) }, } export default { namespaced: true, state, mutations, actions }

在api 下新建menus.js

import request from '@/utils/request' export function getUserMenus() { return request({ url: '/menu/loadmenu', method: 'get' }) }

在store下 modules 下新建perpermission.js

在store下 index.js中

import Vue from 'vue' import Vuex from 'vuex' import getters from './getters' import app from './modules/app' import settings from './modules/settings' import user from './modules/user' import permission from './modules/permission' Vue.use(Vuex) const store = new Vuex.Store({ modules: { app, settings, user, permission //添加 }, getters }) export default store

perpermission.js 代码

import { asyncRoutes, constantRoutes } from '@/router' import Layout from '@/layout' //导入 // 加载路由 function getViews(path) { return resolve => { require.ensure([], (require) => { resolve(require('@/views/' + path + '.vue')) }) } } export function convertMenu(menu) { const result = { path: menu.path, component: menu.component, name: menu.name, meta: { title: menu.title, icon: menu.icon }, children: [], }; if (menu.children && menu.children.length > 0) { menu.children.forEach((child) => { const convertedChild = convertMenu(child); result.children.push(convertedChild); }); } if (result.component === 'Layout') { result.component = Layout } else if(typeof result.component === 'string' && result.component.trim() !== '') { // console.log(result.component) result.component = getViews(result.component) } if (result.children.length === 0) { delete result.children; } delete result.icon; return result; } // 递归格式化菜单路由 function convertMenus(menus) { const result = []; menus.forEach((menu) => { const convertedMenu = convertMenu(menu); result.push(convertedMenu); }); // Add 404 page redirect result.push({ path: '*', redirect: '/404', hidden: true }); return result; } const state = { routes: [], addRoutes: [] } const mutations = { SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) } } const actions = { //新增 menu generateDynamicRoutes({ commit }, menus) { return new Promise(resolve => { const accessedRoutes = convertMenus(menus) commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) }) } } export default { namespaced: true, state, mutations, actions }

store 下 getter.js中

const getters = { sidebar: state => state.app.sidebar, device: state => state.app.device, token: state => state.user.token, avatar: state => state.user.avatar, name: state => state.user.name, roles: state => state.user.roles, permission_routes: state => state.permission.routes, //筛选过的路由 } export default getters

src/layout/components/Sidebar/index.vue 动态展示

import { mapGetters } from 'vuex' import Logo from './Logo' import SidebarItem from './SidebarItem' import variables from '@/styles/variables.scss' export default { components: { SidebarItem, Logo }, computed: { ...mapGetters([ 'sidebar', 'permission_routes'//动态路由信息 ]), routes() { return this.$router.options.routes }, activeMenu() { const route = this.$route const { meta, path } = route // if set path, the sidebar will highlight the path you set if (meta.activeMenu) { return meta.activeMenu } return path }, showLogo() { return this.$store.state.settings.sidebarLogo }, variables() { return variables }, isCollapse() { return !this.sidebar.opened } } }

【本文地址】

vue

vue

今日新闻

推荐新闻